<template>
    <div class="main-layout">
        <!-- 顶部导航 -->
        <header class="top-nav">
            <div class="nav-item active" @click="toHome">首页</div>
        </header>

        <div class="layout-container">
            <!-- 侧边栏 -->
            <aside class="sidebar">
                <div class="avatar-section">
                    <div class="avatar-upload">
                        <img :src="serverIp + userInfo.photo" :alt="userInfo.username" @error="handleImageError">
                    </div>
                    <div class="user-info">
                        <div>{{ userInfo.username }}</div>
                        <div>班级：{{ userInfo.className }}</div>
                    </div>
                </div>

                <nav style="margin: 0 auto">
                    <div v-for="(item, index) in menuItems" :key="index" class="menu-item"
                        @click="handleMenuItemClick(item)">
                        {{ item }}
                    </div>
                </nav>

                <button class="logout-btn" @click="handleLogout">退出登录</button>
            </aside>

            <!-- 主内容插槽 -->
            <main class="main-content">
                <router-view></router-view>
            </main>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from "vue-router"
import { useStore } from "vuex"
import { showModal, toast } from "~/composables/util"
import nomore from '~/assets/nomore.png'
import { serverIp } from "~/utils/config.js";

const router = useRouter()
const store = useStore()

const userInfo = computed(() => ({
    username: store.state.user.username,
    className: store.state.user.className,
    photo: store.state.user.photo
}))

const menuItems = [
    '个人信息',
    '课程签到',
    '考试签到',
    '考试成绩',
    '录播学习',
    '培训证书',
]

const handleAvatarUpload = (e) => {
    const file = e.target.files[0]
    if (file) {
        avatarUrl.value = URL.createObjectURL(file)
    }
};

const handleMenuItemClick = (item) => {
    switch (item) {
        case '个人信息':
            router.push('/userInfo/stuCenter');
            break;
        case '课程签到':
            router.push('/userInfo/videoSignLog');
            break;
        case '考试签到':
            router.push('/userInfo/examSignLog');
            break;
        case '考试成绩':
            router.push('/userInfo/examScore');
            break;
        case '录播学习':
            router.push('/userInfo/livePlayback');
            break;
        case '培训证书':
            router.push('/userInfo/stuHonor');
            break;
        // 其他菜单项逻辑可以继续添加
        default:
            break;
    }
};

const toHome = () => {
    router.push('/');
}
const handleLogout = () => {
    showModal("是否要退出登录？").then(() => {
        store.dispatch("logout")
        // 跳转回登录页
        router.push("/login")
        // 提示退出登录成功
        toast("退出登录成功")
    })
}
const handleImageError = (e) => {
    e.target.src = nomore  // 直接使用导入的nomore路径
    e.target.classList.add('img-error') // 可选：添加错误样式
}
</script>

<style scoped>
.main-layout {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.top-nav {
    display: flex;
    padding: 20px;
    border-bottom: 1px solid #eee;
    height: 60px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.layout-container {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.sidebar {
    width: 240px;
    background: #fff;
    border-right: 1px solid #eee;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: #f8f9fa;
}

.student-center {
    font-family: Arial, sans-serif;
}

.nav-item {
    margin-right: 30px;
    cursor: pointer;
}

.nav-item.active {
    color: #409EFF;
    font-weight: bold;
}

.container {
    display: flex;
}

.sidebar {
    width: 240px;
    padding: 20px;
    border-right: 1px solid #eee;
}

.avatar-upload {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

.avatar-upload input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.user-info {
    text-align: center;
    margin: 15px 0;
}

.menu-item {
    padding: 12px;
    cursor: pointer;
    transition: background 0.3s;
}

.menu-item:hover {
    background: #f5f5f5;
}

.main-content {
    flex: 1;
    padding: 20px;
}

.info-section {
    display: grid;
    gap: 16px;
}

.info-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.logout-btn {
    width: 100%;
    padding: 10px;
    margin-top: 20px;
    background: #f56c6c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.password-section {
    margin-top: 30px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 4px;
}

.img-error {
    background: #f5f7fa url('~/assets/nomore.png') no-repeat center/50%;
    border: 1px dashed #ddd;
    width: 100px;
    height: 100px;
    margin-top: 20px;
    border-radius: 50%;
}
</style>
